export function createSwitchLayout(inputId, dropdownId, options) {
    const input = document.getElementById(inputId);
    const dropdown = document.getElementById(dropdownId);
    let selectedValue = '';
    let allOptions = [...options];
    const isCluster = inputId === 'clusterInput';

    function renderOptions(filterText = '') {
        dropdown.innerHTML = '';
        const lowerFilter = filterText.toLowerCase();
        
        // 添加当前值选项
        const currentDiv = document.createElement('div');
        currentDiv.className = 'option-item current-option' + (selectedValue === '' ? ' selected' : '');
        currentDiv.textContent = '使用当前' + (isCluster ? '集群' : '命名空间');
        currentDiv.onclick = () => selectOption('');
        dropdown.appendChild(currentDiv);

        // 过滤并显示其他匹配的选项
        const matchedOptions = allOptions.filter(opt => 
            opt.toLowerCase().includes(lowerFilter)
        );

        if (matchedOptions.length > 0) {
            // 添加分隔线
            const separator = document.createElement('div');
            separator.className = 'option-separator';
            dropdown.appendChild(separator);
        }

        // 创建选项元素
        matchedOptions.forEach(opt => {
            const div = document.createElement('div');
            div.className = 'option-item' + (opt === selectedValue ? ' selected' : '');
            div.textContent = opt;
            div.onclick = () => selectOption(opt);
            dropdown.appendChild(div);
        });

        // 如果输入的值不在选项中，显示临时选项
        if (filterText && !matchedOptions.some(opt => 
            opt.toLowerCase() === filterText.toLowerCase()
        )) {
            const separator = document.createElement('div');
            separator.className = 'option-separator';
            dropdown.appendChild(separator);
            
            const tempDiv = document.createElement('div');
            tempDiv.className = 'option-item temporary';
            tempDiv.textContent = `使用: ${filterText}`;
            tempDiv.onclick = () => selectOption(filterText);
            dropdown.appendChild(tempDiv);
        }
    }

    function selectOption(value) {
        selectedValue = value;
        input.value = value;
        if (value === '') {
            input.placeholder = '使用当前' + (isCluster ? '集群' : '命名空间');
        }
        hideDropdown();
    }

    function showDropdown() {
        renderOptions(input.value);
        dropdown.classList.add('show');
    }

    function hideDropdown() {
        dropdown.classList.remove('show');
    }

    // 输入框事件
    input.addEventListener('focus', showDropdown);
    input.addEventListener('input', () => {
        showDropdown();
        renderOptions(input.value);
    });

    // 点击外部关闭下拉框
    document.addEventListener('click', (e) => {
        if (!input.contains(e.target) && !dropdown.contains(e.target)) {
            hideDropdown();
        }
    });

    // 键盘事件处理
    input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && input.value) {
            selectOption(input.value);
        }
    });

    return {
        getValue: () => selectedValue,
        setValue: (value) => {
            selectedValue = value === '[current]' ? '' : value;
            input.value = selectedValue;
            input.placeholder = '使用当前' + (isCluster ? '集群' : '命名空间');
            renderOptions(value);
        },
        updateOptions: (newOptions) => {
            allOptions = [...newOptions];
            renderOptions(input.value);
        }
    };
} 